<template>
  <!--  条件查询-->
  <el-form :inline="true" :model="task">
    <el-form-item label="任务编号：">
      <el-input v-model="task.id" />
    </el-form-item>
    <el-form-item label="客户电话：">
      <el-input v-model="task.phone" />
    </el-form-item>
    <el-form-item label="任务状态">
      <el-select
        v-model="task.taskStatus"
        placeholder="Select"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="restart()">重置</el-button>
      <el-button type="primary" @click="show()">搜索</el-button>
    </el-form-item>
  </el-form>


  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="任务编号" width="180" />
    <el-table-column prop="serveItemName" label="服务名称" width="180" />
    <el-table-column prop="phone" label="客户电话" width="180" />
    <el-table-column prop="address" label="服务地址" width="180" />
    <el-table-column prop="ordersAmount" label="服务费用（元）" width="180" />
    <el-table-column prop="name" label="服务人员" width="180" />
    <el-table-column prop="realServeStartTime" label="任务创建时间" width="180" />
    <el-table-column prop="taskStatus" label="任务状态" width="150" #default="scope">
      <el-button link v-if="scope.row.taskStatus === 0">待分配</el-button>
      <el-button link v-else-if="scope.row.taskStatus === 1">待服务</el-button>
      <el-button link v-else-if="scope.row.taskStatus === 2">服务中</el-button>
      <el-button link v-else-if="scope.row.taskStatus === 3">已完成</el-button>
      <el-button link v-else-if="scope.row.taskStatus === 4">被退单</el-button>
      <el-button link v-else-if="scope.row.taskStatus === 5">已取消</el-button>
    </el-table-column>
    <el-table-column label="操作" width="150" #default="scope">
      <el-button link type="primary" text="primary" @click="qx(scope.row.id)">取消</el-button>
      <el-button link> <router-link :to="{path:'/task/taskDetail',query:{id:scope.row.id} }">查看</router-link></el-button>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="task.pageNum"
    v-model:page-size="task.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup>
import {ref} from "vue";


import {ElMessage} from "element-plus";
import { showTask , quxia} from "@/api/task/task";

const total=ref(0)
const task=ref({
  pageNum:1,
  pageSize:5,
})
const handleSizeChange = (val ) => {
  task.value.pageSize=val
  show()
}
const handleCurrentChange = (val ) => {
  task.value.pageNum=val
  show()
}



const options=ref([])
options.value=[
  {
    value: 0,
    label: '待分配'
  },
  {
    value: 1,
    label: '待服务'
  },
  {
    value: 2,
    label: '服务中'
  },
  {
    value: 3,
    label: '已完成'
  },
  {
    value: 4,
    label: '被退单'
  },
  {
    value: 5,
    label: '已取消'
  }
]




const time = ref('')
const tableData = ref([])
function show(){
  showTask(task.value).then(res=>{
    tableData.value=res.data.data.list
    total.value=res.data.data.total
  })
}
show()


// 重置
function restart(){
  task.value.id='',
    task.value.phone='',
    task.value.taskStatus=null,
    task.value.status=null,
    task.value.realServeStartTimeMin=null,
    task.value.realServeStartTimeMax=null
}


// 取消
function qx(id){
  quxia(id).then(res=> {
    if (res.data.code === 200){
      ElMessage.success(res.data.errorMessage)
      show()
    }else{
      ElMessage.error(res.data.errorMessage)
    }
  })
}
</script>
